<template>
	<view class="fd-comment">
		<view class="flex" v-if="commentData.comment.length != 0">
			<view class="commit_left">
				<image class="left_img" :src="photo_cdn1+'zpupload/20231028/a0fed9702979a3ab9e.png'"></image>
			</view>
			<view class="comment-list">
				<!-- 评论主体-顶部数量及发表评论按钮-start -->
				<!-- <view class="comment-num">
					<view>共 {{commentData.commentSize}} 条评论</view>
					<view class="add-btn">
						<button type="primary" size="mini" @click="commentInput">发表评论</button>
					</view>
				</view> -->
				<!-- 评论主体-顶部数量及发表评论按钮-end -->
				<!-- 评论列表-start -->
				<view class="comment-box" v-for="(item, index) in commentData.comment" :key="index">
					<view class="comment-box-item">
						<view style="padding-top: 10rpx;">
							<image :src="item.fu_avatar" mode="aspectFill" class="avatar"></image>
						</view>
						<view class="comment-main">
							<!-- 父评论体-start -->
							<view class="comment-main-top">
								<view class="nick-name-box">
									<view class="nick-name">{{item.fu_nickname}}</view>
								</view>
								<view v-if="item.province">{{item.createtime | formatMsgTime}} · {{item.province | ip_name}}</view>
								<view v-if="item.addr">{{item.createtime | formatMsgTime}} · {{item.addr | ip_name}}</view>
								
								<!-- <view class="zan-box" @click="like(item.id)">
									<text :class="item.likes==1 ? 'isLike' : 'notLike'">{{item.likeNum == 0 ? '抢首赞' : item.likeNum}}</text>
									<image style="width: 28rpx; height: 28rpx;" v-if="item.likes==1" src="/stat1ic/news/zanicon.png"></image>
									<image style="width: 28rpx; height: 28rpx;" v-if="item.likes==0" src="/sta1tic/news/zanicon_1.png" ></image>
								</view> -->
							</view>
							
							<view class="comment-main-content" @click="replyfun(item.fu_nickname,'',item.id,index)" hover-class="hover_item">
								{{item.content.length > 60 ? item.content.slice(0, 59) : item.content}}
								<text v-if="item.content.length > 60">
									{{item.hasShowMore ? item.content.slice(59) : '...'}}
									<text class="foot-btn" @click="showMorefun(item.id)">
										{{item.hasShowMore ? '收起' : '展开'}}
									</text>
								</text>
							</view>
							<!-- 内容展示 -->
							
							<view class="area_box">
								<!-- <view v-if="item.province" style="margin-right: 10rpx;">{{item.createtime | formatMsgTime}} · {{item.province | ip_name}}</view>
								<view v-if="item.addr" style="margin-right: 10rpx;">{{item.createtime | formatMsgTime}} · {{item.addr | ip_name}}</view> -->
								<view class="flex">
									<!-- <view class="foot-btn" v-if="item.fu_nickname" @click="replyfun(item.fu_nickname,'',item.id,index)">回复</view> -->
									<view class="foot-btn" v-if="friend!=1&&user_id==item.user_id" @click="confirmDelete(item.id)">删除</view>
									<view class="foot-btn" v-if="friend==1&&user_id==usid" @click="confirmDelete(item.id)">删除</view>
									<view v-show="item.is_spread==2" class="foot-btn" @tap.stop="unfold(index)">展开</view>
									<view v-show="item.is_spread==1" class="foot-btn" @tap.stop="cut_out(index)">收起</view>
								</view>
							</view>
							
							<!-- 父评论体-end -->
							<!-- 子评论列表-start -->
							<view class="comment-sub-box" v-show="item.is_spread==1">
								<view class="comment-sub-item" v-for="(each,ii) in item.sub" :key="ii" >
									<view>
										<image v-if="each.avatar" :src="photo_cdn1+each.avatar" mode="aspectFill" class="avatar"></image>
										<image v-if="each.fu_avatar" :src="photo_cdn1+each.fu_avatar" mode="aspectFill" class="avatar"></image>
										<image v-if="!each.avatar && each.fu_avatar" :src="photo_cdn1+'zpupload/static/tablet/boy_alive.png'" mode="aspectFill" class="avatar"></image>
			
									</view>
									<view class="comment-main">
										<view class="sub-comment-main-top">
											<view v-if="each.nickname" class="nick-name">{{each.nickname}}</view>
											<view v-if="each.fu_nickname" class="nick-name">{{each.fu_nickname}}</view>
											<view class="zan-box" @click="like(each.id)">
												<text :class="each.likes==1 ? 'isLike' : 'notLike'">{{each.likeNum == 0 ? '抢首赞' : each.likeNum}}</text>
												<image style="width: 28rpx; height: 28rpx;" v-if="each.likes==0" :src="photo_cdn1+'zpupload/static/news/zanicon_1.png'" ></image>
												<image style="width: 28rpx; height: 28rpx;" v-if="each.likes==1" :src="photo_cdn1+'zpupload/static/news/zanicon.png'" ></image>
											</view>
										</view>
										
										<view class="comment-main-content">
											{{each.content.length > 60 ? each.content.slice(0, 59) : each.content}}
											<text v-if="each.content.length > 60">
												{{each.hasShowMore ? each.content.slice(59) : '...'}}
												<text class="foot-btn" @click="showMorefun(each.id)">
													{{each.hasShowMore ? '收起' : '展开'}}
												</text>
											</text>
										</view>
										<view class="area_box">
											<view style="margin-right: 10rpx;" v-if="each.province">{{each.replytime | formatMsgTime}} · {{each.province | ip_name}}</view>
											<view style="margin-right: 10rpx;" v-if="each.addr">{{each.replytime | formatMsgTime}} · {{each.addr | ip_name}}</view>
											<view class="flex">
												<!-- <view class="foot-btn" v-if="item.fu_nickname" @click="replyfun(item.fu_nickname,each.fu_nickname,each.id,null)">回复</view> -->
												<view class="foot-btn" v-if="friend!=1&&user_id==each.reply_user_id" @click="confirmDelete(each.id)">删除</view>
												<view class="foot-btn" v-if="friend==1&&user_id==usid" @click="confirmDelete(each.id)">删除</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<!-- 子评论列表-end -->
						</view>
					</view>
				</view>
				<!-- 评论列表-end -->
			</view>
		</view>		
		<!-- 评论主体-end -->
		
		<!-- 无评论-start -->
		<view class="comment-none" v-else>
			暂无评论，<text @click="commentInput" style="color: #007AFF;">抢沙发</text>
		</view>
		<!-- 无评论-end -->
		<!-- 新增评论-start -->
		<view class="comment-submit-box" v-if="submit" @click="closeInput">
			<!-- 下边的click.stop.prevent用于让上边的click不传下去，以防点到下边的空白处触发closeInput方法 -->
			<view class="comment-add" @click.stop.prevent="stopPrevent" :style="'bottom:' + KeyboardHeight + 'px'">
				<view class="comment-submit">
					<view class="btn-click cancel" @click="closeInput">取消</view>
					<view>
						<view class="replayTag" v-show="showTag">
							<view>回复在 {{pUser}} 的评论下</view>
							<view @click="tagClose" class="replyTagClose">×</view>
						</view>
					</view>
					<view>
						<view v-if="is_reply==1" class="btn-click is_reply_1" @click="revert">发布</view>
						<view v-else class="btn-click" @click="add">发布</view>
					</view>
				</view>
				<textarea class="textarea" v-model="commentReq.content" :placeholder="placeholder" :adjust-position="false" :show-confirm-bar="false"
					@blur="blur" @focus="focusOn" :focus="focus" maxlength="800"></textarea>
			</view>
		</view>
		<!-- 新增评论-end -->
	</view>
</template>

<script>
	import {getUserinfo} from "@/utils/api/api.js";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	export default {
		name: 'fdcomment',
		props: {
			cmData: {
				type: Object,
				default: () => {
					return {
						comment:[],
					};
				}
			},
			deleteTip: {
				type: String,
				default: () => {
					return '操作不可逆，如果评论下有子评论，也将被一并删除，确认？';
				}
			},
			user_id: {
				type: Number,
				default: () => {
					return 0;
				}
			},
			friend: {
				type: Number,
				default: () => {
					return 0;
				}
			},
		},
		watch: {
			cmData: {
				handler: function(newVal, oldVal) {
					this.init(newVal);
				},
				immediate: true
			}
		},
		data() {
			return {
				staticurl,
				photo_cdn1,
				commentData: {
					comment:[],
					commentSize:0,
					readNumer:0,
				},
				placeholder: "请输入评论",
				commentReq: {
					pId: 0, // 评论父id
					content: ''// 评论内容
				},
				pUser: '', // 标签-回复人
				showTag: false, // 标签展示与否
				focus: false, // 输入框自动聚焦
				submit: false, // 弹出评论
				KeyboardHeight: 0 ,// 键盘高度
				usid:'',
				is_reply:0,
			};
		},
		filters:{
			ip_name(val){
				return val.replace("省","");
			}
		},
		mounted: function() {
			uni.onKeyboardHeightChange(res => {
				this.KeyboardHeight = res.height;
			})
		},
		created(){
			this.getUserinfofun();
		},
		methods: {
			async getUserinfofun() {
				let res = await getUserinfo({
			
				})
				this.usid = res.data.userinfo.id;
			},
			// 初始化评论
			init(cmData) {
				// for (var i in cmData.comment) {
				// 	cmData.comment[i].hasShowMore = false;
				// 	for (var j in cmData.comment[i].children) {
				// 		cmData.comment[i].children[j].hasShowMore = false;
				// 	}
				// }
				this.commentData = cmData;
			},
			// 没用的方法，但不要删
			stopPrevent() {},
			// 回复评论
			replyfun(pUser, reUser, pId,index) {
				console.info("index",index);
				if(index!=null){
					this.$emit("unfold",{index:index});//点击评论后自动展开这个评论
				}
				
				this.is_reply = 1;
				this.pUser = pUser;
				this.commentReq.pId = pId;
				if (reUser) {
					this.commentReq.content = '@' + reUser + ' ';
				} else {
					this.commentReq.content = '';
				}
				this.showTag = true;
				this.commentInput();	
			},
			// 删除评论前确认
			confirmDelete(commentId) {
				var that = this;
				uni.showModal({
					title: '警告',
					content: that.deleteTip,
					confirmText: '确认删除',
					success: function(res) {
						if (res.confirm) {
							that.$emit('del', commentId);
						}
					}
				});
			},
			// 新增评论
			add() {
				if (this.commentReq.content == null || this.commentReq.content.length < 2) {
					uni.showToast({
						title: '评论内容过短',
						duration: 2000
					});
					return
				}
				this.$emit('add', this.commentReq);
			},
			//回复评论发布
			revert(){
				//发布后默认展示这个评论
				
				
				
				
				this.$emit('revert',this.commentReq.pId,this.commentReq.content)
			},
			// 点赞评论
			like(commentId) {
				this.$emit('like', commentId);
			},
			// 新增完成
			addComplete() {
				this.commentReq.content = null;
				this.tagClose();
				this.closeInput();
			},
			// 点赞完成-本地修改点赞结果
			likeComplete(commentId) {
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						// this.commentData.comment[i].hasLike ? this.commentData.comment[i].likeNum-- : this.commentData
						// 	.comment[i].likeNum++;
						this.commentData.comment[i].likes = this.commentData.comment[i].likes==1?0:1;
						return
					}
					for (var j in this.commentData.comment[i].sub) {
						if (this.commentData.comment[i].sub[j].id == commentId) {
							// this.commentData.comment[i].children[j].hasLike ? this.commentData.comment[i].children[j]
							// 	.likeNum-- : this.commentData.comment[i].children[j].likeNum++;
							this.commentData.comment[i].sub[j].likes = this.commentData.comment[i].sub[j].likes==1?0:1;
							return
						}
					}
				}
			},
			// 删除完成-本地删除评论
			deleteComplete(commentId) {
				for (var i in this.commentData.comment) {
					for (var j in this.commentData.comment[i].sub) {
						if (this.commentData.comment[i].sub[j].id == commentId) {
							this.commentData.comment[i].sub.splice(Number(j), 1);
							return
						}
					}
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment.splice(Number(i), 1);
						return
					}
				}
				console.log(this.commentData.comment,'commentData.comment')
			},
			//展开评论
			unfold(index){
				// item.is_spread = 1;
				this.$emit("unfold",{index:index})
			},
			//收起评论
			cut_out(index){
				this.$emit("cut_out",{index:index})
				// item.is_spread = 2;
				
			},
			// 展开评论
			showMorefun(commentId) {
				console.info("commentId",commentId);
				
				for (var i in this.commentData.comment) {
					if (this.commentData.comment[i].id == commentId) {
						this.commentData.comment[i].hasShowMore = !this.commentData.comment[i].hasShowMore;
						this.$forceUpdate();//强制更新
						return
					}
					for (var j in this.commentData.comment[i].sub) {
						if (this.commentData.comment[i].sub[j].id == commentId) {
							this.commentData.comment[i].sub[j].hasShowMore = !this.commentData.comment[i].sub[j]
								.hasShowMore;
							this.$forceUpdate();//强制更新
							return
						}
					}
				}
			},
			// 输入框失去焦点
			blur() {
				this.focus = false;
			},
			// 输入框聚焦
			focusOn() {
				this.$emit('focusOn');
			},
			// 标签关闭
			tagClose() {
				this.showTag = false;
				this.pUser = null;
				this.commentReq.pId = null;
			},
			// 输入评论
			commentInput() {
				// TODO 调起键盘方法
				this.submit = true;
				setTimeout(() => {
					this.focus = true;
				}, 50)
				
				this.$emit("commentInput");
			},
			// 关闭输入评论
			closeInput() {
				this.focus = false;
				this.submit = false;
				this.is_reply = 0;
				
				//关闭的时候 把内容删除
				this.commentReq.content = null;
				this.tagClose();//清除标签
			}
		}
	};
</script>

<style lang="scss" scoped>
	.fd-comment {
		margin-top: 30rpx;
		padding: 6rpx 20rpx;
		background-color: #F7F7F7;
		border-radius: 10rpx;
	}
	.comment-list{
		width: 100%;
		margin-left: 20rpx;
	}
	.hb_top{
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}
	.top-read {
		font-size: 28rpx;
		padding-left: 10rpx;
		color: #999999;
	}

	.seg_line_box {
		display: flex;
		height: 5rpx;
		justify-content: space-between;
		margin: 5rpx 0;
	}

	.seg_line {
		width: 45%;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.seg_dot {
		width: 8%;
		border-bottom: 5rpx dotted #dbdbdb;
	}

	.comment-num {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	.comment-box {
		padding: 10rpx 0;
	}

	.comment-box-item {
		display: flex;
	}

	.comment-main {
		padding-left: 20rpx;
	}

	.comment-main-top {
		width: 480rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}
	.area_box{
		color: rgb(153, 153, 153);
		font-size: 24rpx;
		display: flex;
	}
	.sub-comment-main-top {
		width: 510rpx;
		padding-top: 6rpx;
		display: flex;
		justify-content: space-between;
	}

	.avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 12rpx;
	}

	.nick-name-box {
		display: flex;
		align-items: center;
	}

	.comLogo {
		margin-right: 18rpx;
		font-size: 22rpx;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
		color: #FFFFFF;
	}

	.com1 {
		background-color: #d218b1;
	}

	.com2 {
		background-color: #f19c0b;
	}

	.com3 {
		background-color: #c8da85;
	}

	.com4 {
		background-color: #bfd0da;
	}

	.nick-name {
		color: #566D94;
		font-weight: 600;
		font-size: 28rpx;
	}

	.isLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #2d8cf0;
	}

	.notLike {
		font-size: 28rpx;
		padding-right: 10rpx;
		color: #999999;
	}

	.comment-main-content {
		padding: 10rpx 10rpx 10rpx 0;
		font-size: 30rpx;
	}

	.comment-main-foot {
		display: flex;
		font-size: 22rpx;
	}

	.replayTag {
		color: #909399;
		margin-bottom: 10rpx;
		border: 2rpx solid #c8c9cc;
		background-color: #f4f4f5;
		border-radius: 6rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16rpx;
		padding: 10rpx 20rpx;
	}

	.replyTagClose {
		font-size: 40rpx;
		line-height: 24rpx;
		padding: 0 0 4rpx 10rpx;
	}

	.foot-btn {
		color: #007AFF;
		margin-right: 10rpx;
	}

	.comment-sub-box {
		padding: 20rpx 0;
	}

	.comment-sub-item {
		display: flex;
	}

	.comment-none {
		padding: 20rpx;
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.comment-submit-box {
		position: fixed;
		display: flex;
		align-items: flex-end;
		z-index: 888;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		background-color: rgba($color: #000000, $alpha: 0.5);
		width: 100%;
	}

	.comment-add {
		position: fixed;
		background-color: #FFFFFF;
		width: 100%;
		padding: 5rpx;
		border: 2rpx solid #ddd;
		transition: .3s;
		-webkit-transition: .3s;
	}

	.btn-click {
		color: #007AFF;
		font-size: 28rpx;
		padding: 10rpx;
	}

	.cancel {
		color: #606266;
	}

	.textarea {
		height: 200rpx;
		padding: 16rpx;
		width: 100%;
	}

	.comment-submit {
		padding: 5rpx 20rpx 0 20rpx;
		border-bottom: 2rpx dashed #ddd;
		width: calc(100% - 40rpx);
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left_img{
		width: 50rpx;
		height: 50rpx;
		margin-top: 32rpx;
	}
	.hover_item{
		background-color: #E1E1E1 !important;
	}
</style>
